import { createPreviewComp } from './FormDesignPreview';
import i18n from '@src/locales'

import {
  PreviewComponents,
} from './components';

const FormPreview = {
  name: 'form-preview',
  data() {
    return {}
  },
  props: {
    fields: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: true
    }
  },
  provide() {
    return {
      isDisabledPreview:this.disabled
    }
  },
  methods: {
    renderPreviewList(h){
      if(this.isEmpty) return (
        <div class="form-design-tip">
          <p>{i18n.t('common.form.tip.clickBtnToSet')}</p>
        </div>
      )
      
      // 过滤不能编辑的自定义字段 不展示（是否重复报修）
      let fields = this.fields.filter(field => field.setting?.isEdit != 0)
      return fields.map(f => createPreviewComp.call(this, h, f))
    },
  },
  render(h) {
    return (
      <div class="form-design-main">
        <div class="form-design-center" style="position: relative; min-height: 420px">
          <div class='form-design-phone'>
            <div class="form-design-phone-content">
              { this.renderPreviewList(h) }
            </div>
          </div>
          {this.$slots.default}
        </div>
      </div>
      
    );
  },
  components: {...PreviewComponents}
}


export default FormPreview;